<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>CURD</title>
    <link rel="stylesheet" href="{{asset("css/bootstrap.min.css")}}">
    <style>
        .con{
            width: 900px;
            margin:20px auto;
            padding:20px;
            border-radius:5px;
            border:1px solid #eee;
            box-shadow:0 0 2px #eee;
        }

        .block-a{
            width: 200px;
            margin-bottom:10px;
        }
    </style>
</head>
<body>
<div class="con">
    <a href="#" class="btn btn-primary btn-block block-a" data-toggle="modal" data-target="#plus"><span class="glyphicon glyphicon-plus"></span> 添加</a>
    {{--plus模态框--}}
    <div class="modal fade" id="plus" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加数据</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="user" class="col-sm-3 control-label">姓名</label>
                            <div class="col-sm-7">
                            <input type="text" name="username" id="user" placeholder="请输入用户名" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="age" class="col-sm-3 control-label">年龄</label>
                            <div class="col-sm-7">
                                <input type="number" name="age" id="age" placeholder="请输入年龄" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="radio col-sm-offset-3 col-sm-1">
                                <label>
                                    <input type="radio" name="sex" value="1">男
                                </label>
                            </div>
                            <div class="radio col-sm-1">
                                <label>
                                    <input type="radio" name="sex" value="0">女
                                </label>
                            </div>
                        </div>

                       {{-- <div class="form-group modal-footer">
                            <input type="submit" value="保存" class="btn btn-primary">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>--}}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="sub-plus">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



    <div class="table-responsive">
        {{--<nav class="navbar navbar-default" style="margin-bottom:0">
            <div class="container-fluid">
                <div class="navbar-header">
                    sss
                </div>
            </div>
        </nav>--}}
    <table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        @foreach($user as $data)
            <tr>
                <th scope="row">{{$data->id}}</th>
                <td>{{$data->username}}</td>
                <td>{{$data->age}}</td>
                <td>
                    @if($data->sex==1)
                        男
                    @elseif($data->sex==0)
                        女
                    @else
                        未知
                    @endif
                </td>
                <td class="col-sm-3">
                    <div class="btn-group btn-group-xs col-sm-offset-2">
                        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modify" data-whatever="{{$data->id}}" data-name="{{$data->username}}">修改</button>
                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete" data-whatever="{{$data->id}}" data-name="{{$data->username}}">删除</button>
                    </div>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
        {{--modify--}}
        <div class="modal fade" id="modify" tabindex="-1" role="dialog" data-backdrop="static">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">修改数据</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <input type="hidden" name="id" id="userId">
                            <div class="form-group">
                                <label for="update-user" class="col-sm-3 control-label">姓名</label>
                                <div class="col-sm-7">
                                    <input type="text" name="username" id="update-user" placeholder="请输入用户名" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="update-age" class="col-sm-3 control-label">年龄</label>
                                <div class="col-sm-7">
                                    <input type="number" name="age" id="update-age" placeholder="请输入年龄" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="radio col-sm-offset-3 col-sm-1">
                                    <label>
                                        <input type="radio" name="sex" value="1">男
                                    </label>
                                </div>
                                <div class="radio col-sm-1">
                                    <label>
                                        <input type="radio" name="sex" value="0">女
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" id="sub-modify">修改保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>

    {{--delete--}}
    <div class="modal fade" id="delete" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <span class="modal-title glyphicon glyphicon-exclamation-sign" style="color:#d9534f;font-size:20px"></span>
                </div>
                <div class="modal-body">
                    <p>是否删除此条数据?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" id="sub-delete">删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    {{--分页--}}
    <nav style="display:flex;justify-content:center">
        {{$user->render()}}
    </nav>
</div>



<script src="{{asset("js/jquery-3.0.0.min.js")}}"></script>
<script src="{{asset("js/bootstrap.min.js")}}"></script>
<script src="//cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script>
    //Bootstrap模态框禁用空白处点击关闭

    //创建数据
    //username input对象
    /*var userObj=$("#user");
    var ageObj=$('#age');*/

    formValidate($("#user"),$("#age"),$("#sub-plus"),"添加","{{url("demo/index")}}");
    //失去焦点判定
    /**
     * [表单验证]
     * @param userObj   用户名框id
     * @param ageObj    年龄框id
     * @param subOper   提交按钮id
     * @param Oper      操作,字符串
     * @param requestUrl    请求地址
     */
    function formValidate(userObj,ageObj,subOper,Oper,requestUrl) {
        userObj.blur(function () {

            //判断其username框是否为空
            if (!userObj.val()) {
                userObj.parent().addClass("has-error");
                var span = userObj.next();
                if (span.length <= 0) {
                    var help = '<span id="helpBlock2" class="help-block">请填写姓名.</span>';
                    userObj.after(help);
                }
            } else {
                if (userObj.next().length > 0) {
                    userObj.next().remove();
                    userObj.parent().removeClass("has-error");
                }
            }
        });


        ageObj.blur(function () {

            //判断其username框是否为空
            //当输入年龄:不存在,是否为非数字,数字小于等于零
            if (!ageObj.val() || isNaN(ageObj.val()) || ageObj.val() <= 0) {
                ageObj.parent().addClass("has-error");
                var span = ageObj.next();
                if (span.length <= 0) {
                    var help = '<span id="helpBlock2" class="help-block">请正确填写年龄.</span>';
                    ageObj.after(help);
                }
            } else {
                if (ageObj.next().length > 0) {
                    ageObj.next().remove();
                    ageObj.parent().removeClass("has-error");
                }
            }
        });


        subOper.click(function () {
            var radio_checked = $("input:radio[name='sex']:checked");

            if (!userObj.val()) {
                layer.msg('请填写用户名', {icon: 0});
            } else if (!ageObj.val() || isNaN(ageObj.val()) || ageObj.val() <= 0) {
                layer.msg('请正确填写您的年龄')
            } else if (radio_checked.length <= 0) {
                alert('请选择你的性别')
            } else {
                if($("#userId").length>0){
                    var userId=$("#userId").attr("value");
                }
                $.post(requestUrl, {
                    username: userObj.val(),
                    age: ageObj.val(),
                    sex: radio_checked.val(),
                    id:userId
                }, function (data) {
                    layer.msg(Oper + '成功' + data, {icon: 1}, function () {
                        window.location.reload();
                    })
                },'json')
            }
        });
    }
    /*[表单验证]*/

    //删除数据
    $("#delete").on('show.bs.modal',function(event){
        var button =$(event.relatedTarget); //当前事件元素的对象
        recipient=button.data('whatever');
        var name=button.data('name');

        var modal=$(this);
        modal.find('.modal-body').html("是否删除姓名为<b>"+name+"</b>的记录?");
    });

    $("#sub-delete").click(function(){
        $.get("{{url("demo/dataOper")}}",{delete:recipient},function(data){
            if(data=='success')
            {
                layer.msg('删除成功',{icon:1},function(){
                    window.location.href="{{url("demo/index")}}"
                })
            }else{
                layer.msg(data,{icon:2})
            }
        },'text')
    });

    //修改数据
    $("#modify").on('show.bs.modal',function(event){
        var button =$(event.relatedTarget); //当前事件元素的对象
        recipient=button.data('whatever');
        var name=button.data('name');

        var modal=$(this);
        modal.find(".modal-title").html("<h4>修改数据 "+name+"</h4>");
        $.get("{{url("demo/dataOper")}}",{update:recipient},function(data){
            $("#userId").val(data['id']);
            $("#update-user").val(data['username']);
            $("#update-age").val(data['age']);
            modal.find("input:radio[value="+data['sex']+"]").attr("checked","checked");
            modal.find("input:hidden").val(data['id']);
        },'json')
    });

    //修改数据请求
    formValidate($("#update-user"),$("#update-age"),$("#sub-modify"),"修改","{{url("demo/dataOper")}}");
    {{--$("#sub-modify").click(function(){
        $.post("{{url("demo/dataOper")}}",{update:22},function(data){
            alert(data);
        },'json')
    });--}}
</script>
</body>
</html>